<template>
  <div class="mp-category-container clearfix">
    <swiper :options="swiperOption">
      <swiper-slide  v-for="(page,index) of Pages" :key="index">
        <div class="mp-category-item gc-fl-left" v-for="item of page" :key="item.id">
          <div class="mp-category-img-container">
            <img :src="item.imgUrl" alt=""></div>
          <p class="keywords">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script type="es6">
export default {
  name: 'icon',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {}
      // IconList: [{
      //   id: '01',
      //   imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
      //   desc: '景点门票'
      // }, {
      //   id: '02',
      //   imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png',
      //   desc: '踏青赏花'
      // }, {
      //   id: '03',
      //   imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png',
      //   desc: '水上乐园'
      // }, {
      //   id: '04',
      //   imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/75/eca3ce656c886502.png',
      //   desc: '漂流'
      // }, {
      //   id: '05',
      //   imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png',
      //   desc: '温泉'
      // }, {
      //   id: '06',
      //   imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png',
      //   desc: '踏青赏花'
      // }, {
      //   id: '07',
      //   imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png',
      //   desc: '踏青赏花'
      // }, {
      //   id: '08',
      //   imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png',
      //   desc: '水上乐园'
      // }, {
      //   id: '09',
      //   imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/75/eca3ce656c886502.png',
      //   desc: '漂流'
      // }]
    }
  },
  computed: {
    Pages () {
      const pages = []
      this.list.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

<style scoped lang="less">
  .mp-category-container /deep/ .swiper-container {
    height: 100%;
  }

  .mp-category-container {
    overflow: hidden;
    height: 3.7rem;
    padding-top: .1rem;
    background-color: #fff;

  .mp-category-item {
    width: 25%;
    height: 1.8rem;
    padding-top: .1rem;
    text-align: center;

  .mp-category-img-container {
    margin: 0 auto;
    width: 1.1rem;
    height: 1.1rem;
  }

  .keywords {
    margin-top: .1rem;
    color: #212121;
    font-size: .28rem;
  }

  }
  }
</style>
